<template>


    <div class="page-box">
       <div class="page-title">
          {{ '入库记录' }}
       </div>
 
       <div class="page-search">
          <div class="search-box flex_start_center" :style="{ height: IsHeight }">
             <el-input v-model="pageData.keyword" placeholder="订单类型/采购单/出库入库单"
                style="width: 200px; margin-right: 10px; margin-bottom: 10px;" @input="getAlltabeData" />
                <!-- <div class="search-box-item flex_center_center" style="transform: translateY(-5px);">
                            <span class="margin-right-10">显示:</span>
                            <el-button color="#172B4D"> 未入库 </el-button>
                            <el-button color=""> 已入库 </el-button>
                        </div> -->
          </div>
 
          <div class="search-btn">
             <div class="btn_item" @click="handleClickHeight">
                <img class="btn_img" src="@/assets/sx.png" alt=""> <span> 高级筛选 </span>
             </div>
             <div class="btn_item">
                <img class="btn_img" src="@/assets/dc.png" alt=""> <span> 导出 </span>
             </div>
  
          </div>
 
       </div>
       <div class="search-btn-right">
       
       </div>
    </div>
 
    <div class="table-box">
 
       <el-table :data="tabeData" style="width: 100%" v-loading="loading" border    >
       
          <el-table-column align="center" prop="no" label="单号" width="200">
            <template #default="scope">
              <div style="color: blue; cursor: pointer;" @click="handleClickEdit(scope.row, 'details')">
                {{ scope.row.no }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="source_type_text" label="订单类型" width="120">
            <template #default="scope">
                {{ scope.row.source_type_text }}
            </template>
          </el-table-column>

          <el-table-column align="center" prop="source_no" label="关联编号" width="200" />
          <el-table-column align="center" prop="warehouse.name" label="仓库名称" width="140" />
          <el-table-column align="center" prop="warehouse.code" label="仓库编码" width="120" />
          <el-table-column align="center" prop="in_date" label="日期" width="180" />
          <el-table-column align="center" prop="warehouse.manager_name" label="负责人" width="120" />
          <el-table-column align="center" prop="warehouse.manager_phone" label="联系电话" width="140" />
          <el-table-column align="center" prop="is_excp_rc" label="是否容错" width="120">
            <template #default="scope">
                <el-tag :type="scope.row.is_excp_rc === 1 ? 'success' : 'danger'">
                    {{ scope.row.is_excp_rc === 1 ? '是' : '否' }}
                </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="warehouse.address" label="地址" width="180" />
          <el-table-column align="center" prop="note" label="备注" width="120" />
          <el-table-column align="center" prop="creator_name" label="创建人" width="120" />
          <el-table-column align="center" prop="created_at" label="创建时间" width="180" />
       </el-table>
    </div>
 
    <!-- 分页 -->
    <Pagination class="pagination" @pageSize="pageSize" @getPage="getPage" :page="pageData.page"
       :page-size="pageData.page_size" :total="total" />
    <!-- 入库 -->
    <cpStoreDialog v-model:dialogVisible="isShow" :dialogType="dialogType" :dialogRow="dialogRow" @submit="handleSubmit" />
    <!-- 详情 -->
    <Details v-model:dialogVisible="DetailsVisible" :dialogRow="dialogRow" @submit="handleSubmit" />
 </template>
 
 <script setup lang="ts">

 import { ref, onMounted, watch } from "vue";

 import Pagination from "@/components/Pagination.vue";
 import { ElMessageBox, ElMessage } from 'element-plus';
 import cpStoreDialog from "./components/cpStoreDialog.vue";
 import Details from "./components/StorageRecord/Details.vue";
 import api from "@/api";

 // 定义入库记录数据类型
 interface StorageRecord {
    id: number;                // 入库记录ID
    no: string;                // 入库编号
    source_id: number;         // 关联ID
    source_type: string;       // 类型: purchase_order=采购入库
    source_type_text: string;  // 类型说明
    source_no: string;         // 关联编号
    warehouse_id: number;      // 仓库ID
    in_date: string;           // 日期时间
    note: string;              // 备注
    creator_name: string;      // 创建人名称
    created_at: string;        // 创建时间
    is_excp_rc: number;        // 是否容错 1: 是  0: 否
    warehouse: {
       id: number;             // 仓库ID
       name: string;           // 仓库名称
       code: string;           // 仓库编码
       manager_name: string;   // 仓库负责人
       manager_phone: string;  // 电话
       province: string;       // 省
       city: string;           // 市
       area: string;           // 区
       address: string;        // 详细地址
    };
 }
 const DetailsVisible = ref<boolean>(false);

 let IsHeight = ref<number | string>(0);
 const isShow = ref<boolean>(false);
 let dialogType = ref<string>('');
 let dialogRow = ref<StorageRecord>({} as StorageRecord);
 const pageData = ref({
    page_size: 10,
    page: 1,
    keyword: '',
    warehouse_id: ''
 });
 const total = ref(0);
 const tabeData = ref<StorageRecord[]>([]);

 


 const handleClickEdit = async (row: StorageRecord, type: string) => {
    let res = await api.product.product_in_record_detail({
      id: row.id,
    });

    if (res.code === 200) {
      console.log(res.data);
      dialogRow.value = res.data;
      dialogType.value = type;
      if (type == 'edit') {
        isShow.value = true;
      } else {
        DetailsVisible.value = true;
      }
    }
 }

 let nub = ref<number>(0);
 const handleClickHeight = () => {
    nub.value++;
    if (nub.value % 2 == 1) {
       IsHeight.value = '34px';
    } else {
       IsHeight.value = '0px';
    }
 }
 
 const pageSize = (e: number) => {
    pageData.value.page_size = e
    getAlltabeData();
 }
 const getPage = (e: number) => {
    pageData.value.page = e
    getAlltabeData();
 }
 onMounted(() => {
    getAlltabeData();
 })
 

 
 // 获取入库记录列表
 const getAlltabeData = async () => {
    loading.value = true;
    try {
      const res = await api.product.product_in_record({
        ...pageData.value,
      });
      console.log(res);
      if (res.code == 200) {
        tabeData.value = res.data.data;
        total.value = res.data.pager.total_records;
      }
  
      loading.value = false;
    } catch (error) {

    } finally {
      loading.value = false;
    }
 };
 
 const loading = ref(false);
 

 // 提交表单回调
 const handleSubmit = () => {
    getAlltabeData();
 }


 
 </script>
 
 <style lang="scss" scoped>
 .btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
 }
 
 .main-warehouse {
    font-weight: bold;
    color: #333;
 }
 
 // 输入框样式
 :deep(.el-input__wrapper) {
    background-color: rgba(250, 252, 251, 1);
 }
 
 //表格样式
 :deep(.el-table) {
    --el-table-header-bg-color: rgba(235, 236, 240, 1);
 }
 
 :deep(.el-table thead) {
    color: #444;
 }
 
 // 子仓库行样式
 :deep(.sub-warehouse-row) {
    background-color: #fef6e5;
 }
 
 //分页样式
 .pagination {
    width: calc(100% - 250px);
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding-top: 10px;
    border-top: 1px solid #98989848;
 }
 
 :deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: #000 !important;
 }
 </style>
 